<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #e5e5e5;
        }

        ul {
            width: 1200px;
            height: 600px;
            /* background-color: orange; */
            margin: 50px auto;
        }

        ul li {
            width: 234px;
            height: 330px;
            background-color: #fff;
            float: left;
            margin: 10px;
            text-align: center;
            list-style: none;
            font-size: 14px;
            padding: 20px;
            box-sizing: border-box;
        }

        ul li img {
            width: 160px;
            height: 160px;
            margin-top: 30px;
        }

        ul li p {
            line-height: 30px;
        }

        ul li .des {
            font-size: 12px;
            color: #b0b0b0;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }

        ul li .price {
            color: #ff6700;
        }

        .cart {
            width: 200px;
            height: 80px;
            position: fixed;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(202, 46, 46, 0.5);
            color: #fff;
            font-size: 20px;
            text-align: center;
            line-height: 80px;
        }
        .next{
            width: 50px;
            height: 50px;
            background-color: orange;
            color: brown;
            position: fixed;
            right: 30%;
            top: 50%;
            transform: translateY(-50%);
        }
        .before{
            width: 50px;
            height: 50px;
            background-color: orange;
            color: brown;
            position: fixed;
            left: 22%;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>

<body>
    <div class="Store">
        <ul></ul>
        <a href="./购物车.html"><div class="cart"></div></a>
    </div>
    <button class="next">&gt;</button>
    <button class="before">&lt;</button>

    <script src="./js/inCart.js"></script>

    <script>
        // let list = JSON.parse(localStorage.getItem('list')) || [];
        // let num = 0;
        class inCart {
            constructor() {
                this.ul = document.querySelector('ul')
                this.Store = document.querySelector('.Store')
                this.car = document.querySelector('.cart')
                this.init()
            }
            init() {
                this.render()
                this.addEvent()
            }
            // totalNum(){
            //     let list = JSON.parse(localStorage.getItem('list')) || [];
            //     let num = 0;
            //     list.forEach(item => {
            //         num += item.cart_num
            //         // console.log(num);
            //     })
            //     return num
            // }
            render() {
                this.ul.innerHTML = ''
                // 遍历数据
                cart.forEach(item => {
                    this.ul.innerHTML += `
                <li>
                    <img src="${item.url}" alt="">
                    <h3>${item.title}</h3>
                    <p class="des">${item.des}</p>
                    <p class="price">${item.price}元</p>
                    <button class="putIn" data-id=${item.id}>加入购物车</button>
                </li>
                `
                })
               
                //渲染购物车
                let num=this.totalNum()
                this.car.innerHTML = `购物车内共${num}件商品`
            }
            //点击加入购物车
            addEvent() {
                let list = JSON.parse(localStorage.getItem('list')) || [];
                this.Store.addEventListener('click', (e) => {
                    let target = e.target
                    // console.log(target);
                    if (target.className === 'putIn') {
                        let id = target.dataset.id - 0
                        let goods = cart.find(item => item.id === id);
                        // console.log(goods);
                        //判断购物车中是否有商品
                        if (!list.length) {
                            list.push(goods)
                            // console.log(list);
                        }
                        else {
                            //判断购物车中有无该商品
                            let judge = list.some(item => item.id === id)
                            if (judge) {
                                //如果购物车中有该商品，则数量加一
                                list.forEach(item => {
                                    if (item.id === id) {
                                        item.cart_num++
                                    }
                                })
                                // console.log(list);
                            } else {
                                //如果购物车中没有该商品，则添加该商品
                                list.push(goods)
                                // console.log(list);
                            }
                        }
                        localStorage.setItem('list', JSON.stringify(list));
                        this.render()
                    }
                })
            }
            totalNum(){
                let list = JSON.parse(localStorage.getItem('list')) || [];
                let num = 0;
                list.forEach(item => {
                    num += item.cart_num
                    // console.log(num);
                })
                return num
            }
           

        }
        new inCart()


    </script>
</body>

</html>